<template>
<view :class="creation?'boss':''" style="width: 100vw;height: 100vh;" @click="demo">
	<view class="text_title">
		休息中...
	</view>
	<view class="windmill">
		
		<div class="windmill__sun"></div>
	        <view class="hills"></view>
	        <view class="wheel">
	            <view class="windwheel"></view>
	            <view class="windwheel windwheel2"></view>
	            <view class="windwheel windwheel3"></view>
	            <view class="windwheel windwheel4"></view>
	        </view>
	        <view class="roof"></view>
	        <view class="mill"></view>
	        <view class="house"></view>
	        <ul class="tree">
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
	        <ul class="bush">
	            <li></li>
	            <li></li>
	            <li></li>
	        </ul>
	        <ul class="bush bush2">
	            <li></li>
	            <li></li>
	        </ul>
	        <view class="cloud"></view>
	        <view class="cloud cloud2"></view>
	    </view>
			
			<view class="renew" v-if="userId==userData.id">
				点击任意位置恢复游戏
			</view>
</view>


</template>

<script>
	export default {
		data() {
			return {
				creation:true,
				userData:{},
				userId:'',
				acceptStatus:true
			}
		},
		onUnload() {
			this.acceptStatus=false
			// uni.$off('onMessage') 
		},
		onShow() {
			this.userData=uni.getStorageSync("userData")
		},

		mounted() {
			this.creation=false
			uni.$on('onMessage',(res)=>{
				
if(!this.acceptStatus) return;
				console.log('asldijakSAP快打',res)
				this.userId = res.data.game.user_id

			})
			let game_id = uni.getStorageSync("gameId")
			let userData = 	this.userData
			this.$ws.socketTask.send({
				data: JSON.stringify({
				game_id,
				user_id: userData.id
			}),
				async success() {
					console.log("消息发送成功")
				}
			});
		},
		methods: {
			demo(){
				if(this.userData.id!=this.userId) return
				this.creation=true
					
				setTimeout(()=>{
					uni.showLoading({
						title: '恢复中'
					});
					let game_id = uni.getStorageSync("gameId")
				this.$myRuquestWs('home/game/game_go_s',{game_id}).then(res=>{
					uni.hideLoading();
				})
				},1000)
				
			}
		}
	}
</script>

<style lang="scss">
	.text_title{
		text-align: center;
		position: fixed;
		top: 8vh;
		left: 0;
		width: 100vw;
		text-align: center;
		font-size: calc(44vmin / 7.5);
		color: #5cdfdd;
	}

.boss .windmill >view{
	position: absolute;
}
.boss .windmill>.roof{

	top: -100vw;
}
.boss .windmill>.hills{
	left: -100vw;
}

.boss .windmill>.wheel{
	top: -100vw;
}

.boss .windmill>.mill{
	left: 100vw;
}

.boss .windmill>.tree{
	top: 100vw;
}

.boss .windmill>.bush{
	top: 100vw;
}
.boss .windmill> .house{
	left:100vw
}
.boss .windmill> .cloud{
	left:100vw
}
.boss .windmill> .windmill__sun{
	left:-100vw;
	top:-100vh;
}
.windmill__sun {
  position: absolute;
  height: calc(40vmin / 7.5);
  width: calc(40vmin / 7.5);
  top: calc(25vmin / 7.5);
  left: calc(-80vmin / 7.5);
  border-radius: 100%;
  background: #fee4b8;
  box-shadow: 0 0 calc(150vmin / 7.5) calc(40vmin / 7.5) #fee4b8, 0 0 calc(100vmin / 7.5) calc(20vmin / 7.5) #fee4b8, 0 0 calc(25vmin / 7.5) calc(5vmin / 7.5) #fee4b8;
}
.windmill {
    position: absolute;
    left: 40%;
    top: 30%;
		transition: all 2.5s;
		transform: scale(1.8);
		filter:brightness(.9)
}

.hills {
    width: calc(280vmin / 7.5);
    height: calc(180vmin / 7.5);
    background-color: #acdced;
    position: absolute;
    top: calc(64vmin / 7.5);
    left: calc(-110vmin / 7.5);
    opacity: 0.5;
    border-radius: calc(300vmin / 7.5) calc(300vmin / 7.5) 0 0;
}

.hills:before, .hills:after {
    content: '';
    position: absolute;
    background-color: #acdced;
    border-radius: calc(300vmin / 7.5) calc(300vmin / 7.5) 0 0;
}

.hills:before {
    width: calc(250vmin / 7.5);
    height: calc(110vmin / 7.5);
    bottom: 0;
    right: calc(-120vmin / 7.5);
}

.wheel {
    z-index: 10;
    width: calc(192vmin / 7.5);
    height: calc(192vmin / 7.5);
    position: absolute;
    left: calc(8vmin / 7.5);
    top: calc(10vmin / 7.5);
    animation: spin 15s linear infinite;
		transition: all 2s ease-in-out .8s !important;
}

.windwheel {
    position: absolute;
    width: calc(8vmin / 7.5);
    height: calc(100vmin / 7.5);
    background-color: #153d5a;
    margin-right: calc(10vmin / 7.5);
    left: calc(92vmin / 7.5);
}

.windwheel:before {
    positioN: absolute;
    content: "";
    background-color: #153d5a;
    opacity: 0.7;
    width: calc(15vmin / 7.5);
    height: calc(75vmin / 7.5);
    left: calc(8vmin / 7.5);
}

.windwheel2 {
    transform: rotate(90deg);
    top: calc(46vmin / 7.5);
    left: calc(138vmin / 7.5);
    z-index: 40;
}

.windwheel3 {
    transform: rotate(180deg);
    top: calc(92vmin / 7.5);
}

.windwheel4 {
    transform: rotate(-90deg);
    top: calc(46vmin / 7.5);
    left: calc(46vmin / 7.5);
}

.windwheel4:after {
    position: absolute;
    content: "";
    background-color: #153d5a;
    opacity: 0.7;
    width: calc(22vmin / 7.5);
    height: calc(22vmin / 7.5);
    bottom: calc(-7vmin / 7.5);
    left: calc(-7vmin / 7.5);
    transform: rotate(45deg);
}

.roof {
    position: absolute;
    z-index: 9;
    left: calc(52vmin / 7.5);
    top: calc(55vmin / 7.5);
    width: 0;
    height: 0;
    border-left: calc(50vmin / 7.5) solid transparent; 
    border-right: calc(50vmin / 7.5) solid transparent;
    border-bottom: calc(70vmin / 7.5) solid #5cdfdd;
			transition: all 2s ease-in-out .5s !important;
}

.mill {
    position: absolute;
    left: calc(52vmin / 7.5);
    top: calc(124vmin / 7.5);
    width: calc(100vmin / 7.5);
    height: calc(120vmin / 7.5);
    background-color: #fff;
}

.mill:after {
    position: absolute;
    content: "";
    background-color: #153d5a;
    height: calc(50vmin / 7.5);
    width: calc(40vmin / 7.5);
    bottom: 0;
    left: calc(28vmin / 7.5);
    border-radius: 40% 40% 0 0;
    border-left: calc(5vmin / 7.5) solid #acdced;
}

.mill:before {
    position: absolute;
    content: "";
    background-color: #153d5a;
    height: calc(40vmin / 7.5);
    width: calc(30vmin / 7.5);
    top: calc(20vmin / 7.5);
    left: calc(32vmin / 7.5);
    border-radius: calc(18vmin / 7.5);
    border-left: calc(5vmin / 7.5) solid #acdced;
}

.house {
    position: absolute;
    width: calc(80vmin / 7.5);
    height: calc(60vmin / 7.5);
    background-color: #fff;
    top: calc(164vmin / 7.5);
    left: calc(152vmin / 7.5);
    border-top: calc(20vmin / 7.5) solid #5cdfdd;
}

.house:after {
    content: "";
    position: absolute;
    background-color: #153d5a;
    width: calc(20vmin / 7.5);
    height: calc(30vmin / 7.5);
    bottom: 0;
    left: calc(30vmin / 7.5);
    border-left: calc(5vmin / 7.5) solid #acdced;
}

.bush {
    position: relative;
    top: calc(220vmin / 7.5);
    left: calc(-60vmin / 7.5);
}

.bush li {
    float: left;
    list-style: none;
    background-color: #5cdfdd;
    width: calc(40vmin / 7.5);
    height: calc(25vmin / 7.5);
    border-radius: calc(100vmin / 7.5) calc(100vmin / 7.5) 0 0;
}

.bush2 {
    top: calc(195vmin / 7.5);
    left: calc(160vmin / 7.5);
}

.tree {
    position: absolute;
    left: calc(-50vmin / 7.5);
    top: calc(120vmin / 7.5);
}

.tree li {
    list-style: none;
    background-color: #153d5a;
    width: calc(45vmin / 7.5);
    height: calc(45vmin / 7.5);
    border-radius: 100%;
    margin-bottom: calc(-15vmin / 7.5);
}

.tree:after {
    content: "";
    position: absolute;
    background-color: #acdced;
    width: calc(3vmin / 7.5);
    height: calc(80vmin / 7.5);
    top: calc(25vmin / 7.5);
    right: calc(21vmin / 7.5);
}

.cloud {
    position: absolute;
    top: calc(40vmin / 7.5);
    left: calc(-100vmin / 7.5);
    background-color: #fff;
    height: calc(20vmin / 7.5);
    width: calc(40vmin / 7.5);
    z-index: 1000;
    border-radius: calc(40vmin / 7.5) calc(40vmin / 7.5) 0 0;
    opacity: 0.7;
    animation: clouds 70s linear alternate infinite;
}

.cloud:before {
    content: "";
    position: absolute;
    background-color: #fff;
    height: calc(30vmin / 7.5);
    width: calc(60vmin / 7.5);
    border-radius: calc(60vmin / 7.5) calc(60vmin / 7.5) 0 0;
    bottom: 0;
    right: calc(20vmin / 7.5);
}

.cloud2 {
    height: calc(40vmin / 7.5);
    width: calc(80vmin / 7.5);
    top: calc(-20vmin / 7.5);
    z-index: 1;
    animation: clouds 60s linear alternate-reverse infinite;
}

.cloud2:before {
    content: "";
    position: absolute;
    background-color: #fff;
    height: calc(30vmin / 7.5);
    width: calc(60vmin / 7.5);
    border-radius: calc(60vmin / 7.5) calc(60vmin / 7.5) 0 0;
    bottom: 0;
    right: calc(40vmin / 7.5);
}

@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes clouds {
    100% {
        transform: translateX(calc(300vmin / 7.5));
    }
}
@keyframes text_an{
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.windmill view{

	transition: all 2s ease-in-out;

}

.renew{
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(40vmin / 7.5);
	font-size: calc(32vmin / 7.5);
	font-weight: 700;
	text-align: center;
	animation: text_an 3s linear infinite;
}

</style>